<template>
	<button @click="handledClick" :class="['debounce-throttle-button', externalClass]" :style="externalStyle">
		{{ title }}
	</button>
</template>

<script setup lang="ts">
	// 引入防抖函数
	import { useDebounce } from "../../utils/debounce";
	// 引入节流函数
	import { useThrottle } from "../../utils/throttle";
	// 父组件传参的参数及类型
	interface Props {
		title : string;
		onClick : () => void;
		mode ?: "debounce" | "throttle";
		delay ?: number;
		interval ?: number;
		class ?: string | string[] | Record<string, boolean>; // 标记为可选
		style ?: Record<string, string> | string | object; // 标记为可选
	}
	// 父组件传递的参数及默认参数
	const props = withDefaults(defineProps<Props>(), {
		mode: "debounce",
		delay: 300,
		interval: 300,
		class: "", // 默认空class（兼容字符串或对象）
		style: "", // 默认空style
	});
	// 父组件传递过来的执行函数
	function handleClick() {
		props.onClick();
	}
	// 根据类型判断是防抖还是节流
	const handledClick = props.mode === "debounce"
		? useDebounce(handleClick, props.delay)
		: useThrottle(handleClick, props.interval);

	const externalClass = props.class;
	const externalStyle = props.style;
</script>

<style scoped>
	.debounce-throttle-button {
		padding: 8px 16px;
		cursor: pointer;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 4px;
		transition: background-color 0.3s;
	}

	.debounce-throttle-button:hover {
		background-color: #45a049;
	}
</style>